import React, { memo ,useEffect} from 'react'
import HNSongsHeader from './c-cpns/songs-header'
import HNSongList from './c-cpns/songs-list'
import {HNSongstWrap} from './style'
import {useDispatch} from 'react-redux'
import {getCatagoryAction,changeCurrentCatagory,getCatagorySongsAction} from './store/actionCreators'
import {useHistory} from 'react-router-dom'
export default memo(function HNSongst() {

    const dispatch = useDispatch();
    const history = useHistory();
    const cat = history.location.cat || "全部";

    useEffect(() => {
      dispatch(changeCurrentCatagory(cat));
    },[dispatch,cat]);

    useEffect(() => {
        dispatch(getCatagoryAction());
        dispatch(getCatagorySongsAction(0));
    },[dispatch])

    return (
        <HNSongstWrap className="wrap-v1">
            <div className="content111">
               <HNSongsHeader></HNSongsHeader>
               <HNSongList></HNSongList>
            </div>
        </HNSongstWrap>
    )
})
